<template>
	<div class="app">
		<h2>求和为: {{ sum }}</h2>
		<h2>sum2: {{ sum }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeSum2">tryChangeSum2</button>
		<hr>
		<h2>汽车品牌: {{ car.brand }}, 颜色: {{ car.options.color }}</h2>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeCar">修改车</button>
		<hr>
		<h2>汽车品牌: {{ car2.brand }}, 颜色: {{ car2.options.color }}</h2>
		<button @click="changeBrand2">修改品牌</button>
		<button @click="changeColor2">修改颜色</button>
		<button @click="changeCar2">修改车</button>
	</div>
</template>

<!-- 浅层ref, 纸堆顶层数据的修改做响应. 相比ref效率更高 -->
<script setup lang="ts" name="App">
import { ref, readonly, shallowReadonly, reactive } from 'vue'
let sum = ref(0)
// 将可变的响应式对象改为不可变的
let sum2 = readonly(sum)
let car = reactive({
	brand: '宝马',
	options: {
		color: '黑色',
		gear: '自动'
	}
})
// 修改品牌,修改车 无效; 修改颜色有效
let car2 = shallowReadonly(car)

function changeSum() {
	sum.value++
}
function changeSum2() {
	sum2.value++ // 编译报错
}

function changeBrand() {
	car.brand = '奔驰'
}
function changeColor() {
	car.options.color = '白色'
}
function changeCar() {
	Object.assign(car, {
		brand: '长安',
		options: {
			color: '黄色',
			gear: '手动'
		}
	})
}

function changeBrand2() {
	car2.brand = '奔驰'
}
function changeColor2() {
	car2.options.color = '绿色'
}
function changeCar2() {
	Object.assign(car2, {
		brand: '长安',
		options: {
			color: '彩色',
			gear: '手动'
		}
	})
}
</script>

<style>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>